/* Notifikasi Komentar
----------------------------------------------- */

#cm-total {
  position:fixed;
  top:20px;
  right:-18px;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {  
  position :fixed;
  top: 21px;
  right: 135px;
  z-index: 99999;
  height: 22px;
  width: 19px;
  opacity: .6;
  cursor: default;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:absolute;
  position:fixed;
  top:0%;
  left:0%;
  width:100%;
  height:100%;
  z-index:999;  
  display:none;
}
#cm-container {
  width: 355px;
  min-height: 304px;
  max-height: 304px;
  position: fixed;
  top: 53px;
  right: 36px;
  z-index: 9999;
  background-color: #e5e5e5;
  padding: 36px 20px 10px 20px;
  color: #666;
  box-shadow: 0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align: left;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 2px;
  background-clip: padding-box;
  display:none;
}
#cm-contop {
  content: url('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/s1600/arrow-notif.png');
  position: fixed;
  top: 44px;
  right: 135px;
  z-index: 9999;
  display: none;
  webkit-transform: translateZ(0);
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#cm-container:after {
  content:"Notifikasi Komentar";
  position:absolute;
  top:14px;
  left:147px;
  text-align:center;
  font:bold 12px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
  height:272px;
  overflow:auto;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 4px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: #f1f1f1;
  margin-bottom:5px;
  top: 4px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}